<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ETF持仓明细查询</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .header h1 {
            font-size: 24px;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        
        .search-form {
            display: flex;
            gap: 15px;
            align-items: flex-end;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .form-group label {
            font-size: 14px;
            color: #666;
            font-weight: 500;
        }
        
        .form-group input,
        .form-group select,
        .form-group button {
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #4a90e2;
        }
        
        .form-group button {
            background-color: #4a90e2;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .form-group button:hover {
            background-color: #357abd;
        }
        
        .form-group button.secondary {
            background-color: #6c757d;
        }
        
        .form-group button.secondary:hover {
            background-color: #5a6268;
        }
        
        .content {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }
        
        .stats-section,
        .chart-section,
        .data-section {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .stats-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }
        
        .stat-card {
            text-align: center;
            padding: 20px;
            border-radius: 8px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .stat-card h3 {
            font-size: 14px;
            margin-bottom: 10px;
            opacity: 0.9;
        }
        
        .stat-card .value {
            font-size: 28px;
            font-weight: bold;
        }
        
        .chart-section {
            height: 400px;
        }
        
        .data-section h2 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #2c3e50;
        }
        
        .table-container {
            overflow-x: auto;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        table th,
        table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        table th {
            background-color: #f8f9fa;
            font-weight: 600;
            color: #2c3e50;
        }
        
        table tr:hover {
            background-color: #f8f9fa;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }
        
        .error {
            padding: 15px;
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            border-radius: 4px;
            margin-bottom: 15px;
        }
        
        .fund-info {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #e3f2fd;
            border-radius: 4px;
        }
        
        .fund-info h2 {
            font-size: 20px;
            color: #1976d2;
            margin-bottom: 5px;
        }
        
        .fund-info .report-date {
            color: #666;
            font-size: 14px;
        }
        
        @media (max-width: 768px) {
            .search-form {
                flex-direction: column;
            }
            
            .stats-section {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>ETF持仓明细查询系统</h1>
            <form id="searchForm" class="search-form">
                <div class="form-group">
                    <label for="fundCode">基金代码</label>
                    <input type="text" id="fundCode" placeholder="请输入基金代码，如：159583" value="159583">
                </div>
                <div class="form-group">
                    <label for="reportYear">报告年份</label>
                    <select id="reportYear">
                        <option value="">全部年份</option>
                        <option value="2025">2025</option>
                        <option value="2024" selected>2024</option>
                        <option value="2023">2023</option>
                        <option value="2022">2022</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="reportQuarter">报告季度</label>
                    <select id="reportQuarter">
                        <option value="">全部季度</option>
                        <option value="1">第1季度</option>
                        <option value="2">第2季度</option>
                        <option value="3">第3季度</option>
                        <option value="4" selected>第4季度</option>
                    </select>
                </div>
                <div class="form-group">
                    <button type="submit">查询数据</button>
                </div>
                <div class="form-group">
                    <button type="button" id="refreshBtn" class="secondary">刷新数据</button>
                </div>
            </form>
        </div>
        
        <div id="errorMsg" class="error" style="display: none;"></div>
        
        <div id="fundInfo" class="fund-info" style="display: none;">
            <h2 id="fundName"></h2>
            <div class="report-date" id="reportDateRange"></div>
        </div>
        
        <div class="content">
            <div class="stats-section">
                <div class="stat-card">
                    <h3>持仓股票数</h3>
                    <div class="value" id="stockCount">0</div>
                </div>
                <div class="stat-card">
                    <h3>前十大持仓占比</h3>
                    <div class="value" id="topTenRatio">0%</div>
                </div>
                <div class="stat-card">
                    <h3>平均持仓比例</h3>
                    <div class="value" id="avgRatio">0%</div>
                </div>
                <div class="stat-card">
                    <h3>总持仓市值</h3>
                    <div class="value" id="totalValue">0万</div>
                </div>
            </div>
            
            <div class="chart-section">
                <div id="positionChart" style="width: 100%; height: 100%;"></div>
            </div>
            
            <div class="data-section">
                <h2>持仓明细</h2>
                <div class="table-container">
                    <table id="positionTable">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>股票代码</th>
                                <th>股票名称</th>
                                <th>占净值比例</th>
                                <th>持股数(万股)</th>
                                <th>持仓市值(万元)</th>
                            </tr>
                        </thead>
                        <tbody id="positionTableBody">
                            <tr>
                                <td colspan="6" class="loading">请输入基金代码并点击查询按钮获取数据</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化图表
            const chartDom = document.getElementById('positionChart');
            const myChart = echarts.init(chartDom);
            
            // 表单提交事件
            document.getElementById('searchForm').addEventListener('submit', function(e) {
                e.preventDefault();
                queryPositionData();
            });
            
            // 刷新数据按钮事件
            document.getElementById('refreshBtn').addEventListener('click', function() {
                refreshPositionData();
            });
            
            // 查询持仓数据
            function queryPositionData() {
                const fundCode = document.getElementById('fundCode').value.trim();
                const reportYear = document.getElementById('reportYear').value;
                const reportQuarter = document.getElementById('reportQuarter').value;
                
                if (!fundCode) {
                    showError('请输入基金代码');
                    return;
                }
                
                showLoading();
                hideError();
                
                let apiUrl = `/api/etf/position/get?fundCode=${fundCode}`;
                if (reportYear) {
                    apiUrl += `&reportYear=${reportYear}`;
                }
                if (reportQuarter) {
                    apiUrl += `&reportQuarter=${reportQuarter}`;
                }
                
                fetch(apiUrl)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success && data.data) {
                            displayPositionData(data.data);
                        } else {
                            showError(data.message || '查询数据失败');
                            clearData();
                        }
                    })
                    .catch(error => {
                        console.error('查询数据出错:', error);
                        showError('查询数据失败，请稍后重试');
                        clearData();
                    })
                    .finally(() => {
                        hideLoading();
                    });
            }
            
            // 刷新持仓数据
            function refreshPositionData() {
                const fundCode = document.getElementById('fundCode').value.trim();
                
                if (!fundCode) {
                    showError('请输入基金代码');
                    return;
                }
                
                showLoading();
                hideError();
                
                fetch(`/api/etf/position/fetch/${fundCode}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            alert(`数据刷新成功，共更新${data.data}条记录`);
                            queryPositionData();
                        } else {
                            showError(data.message || '刷新数据失败');
                        }
                    })
                    .catch(error => {
                        console.error('刷新数据出错:', error);
                        showError('刷新数据失败，请稍后重试');
                    })
                    .finally(() => {
                        hideLoading();
                    });
            }
            
            // 显示持仓数据
            function displayPositionData(data) {
                const tableBody = document.getElementById('positionTableBody');
                tableBody.innerHTML = '';
                
                if (data.length === 0) {
                    tableBody.innerHTML = '<tr><td colspan="6" class="loading">暂无数据</td></tr>';
                    clearStats();
                    clearChart();
                    return;
                }
                
                // 排序数据（按持仓比例降序）
                data.sort((a, b) => {
                    return (b.netValueRatio || 0) - (a.netValueRatio || 0);
                });
                
                // 显示表格数据
                let totalValue = 0;
                let topTenRatio = 0;
                
                data.forEach((item, index) => {
                    const row = document.createElement('tr');
                    
                    // 计算合计值
                    const ratio = parseFloat(item.netValueRatio || 0);
                    const value = parseFloat(item.positionValue || 0);
                    totalValue += value;
                    
                    if (index < 10) {
                        topTenRatio += ratio;
                    }
                    
                    row.innerHTML = `
                        <td>${index + 1}</td>
                        <td>${item.stockCode || '-'}</td>
                        <td>${item.stockName || '-'}</td>
                        <td>${ratio.toFixed(2)}%</td>
                        <td>${parseFloat(item.shareQuantity || 0).toFixed(2)}</td>
                        <td>${value.toFixed(2)}</td>
                    `;
                    
                    tableBody.appendChild(row);
                });
                
                // 显示统计数据
                document.getElementById('stockCount').textContent = data.length;
                document.getElementById('topTenRatio').textContent = topTenRatio.toFixed(2) + '%';
                document.getElementById('avgRatio').textContent = (totalValue > 0 ? (totalValue / data.length).toFixed(2) : '0.00') + '%';
                document.getElementById('totalValue').textContent = totalValue.toFixed(2) + '万';
                
                // 显示基金信息
                if (data[0]) {
                    document.getElementById('fundName').textContent = data[0].fundName || '未知基金';
                    
                    // 获取日期范围
                    let minDate = data[0].reportDate;
                    let maxDate = data[0].reportDate;
                    
                    data.forEach(item => {
                        if (item.reportDate < minDate) minDate = item.reportDate;
                        if (item.reportDate > maxDate) maxDate = item.reportDate;
                    });
                    
                    const dateFormat = (dateStr) => {
                        if (!dateStr) return '';
                        const date = new Date(dateStr);
                        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
                    };
                    
                    document.getElementById('reportDateRange').textContent = `报告日期范围：${dateFormat(minDate)} 至 ${dateFormat(maxDate)}`;
                    document.getElementById('fundInfo').style.display = 'block';
                }
                
                // 更新图表
                updateChart(data);
            }
            
            // 更新图表
            function updateChart(data) {
                // 只显示前10个持仓
                const topData = data.slice(0, 10);
                const names = topData.map(item => item.stockName || '未知');
                const ratios = topData.map(item => parseFloat(item.netValueRatio || 0));
                
                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c}% ({d}%)'
                    },
                    legend: {
                        orient: 'horizontal',
                        bottom: 10,
                        data: names
                    },
                    series: [
                        {
                            name: '持仓比例',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '18',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: topData.map(item => ({
                                value: parseFloat(item.netValueRatio || 0),
                                name: item.stockName || '未知'
                            }))
                        }
                    ]
                };
                
                myChart.setOption(option);
            }
            
            // 清除数据
            function clearData() {
                document.getElementById('positionTableBody').innerHTML = '<tr><td colspan="6" class="loading">暂无数据</td></tr>';
                clearStats();
                clearChart();
                document.getElementById('fundInfo').style.display = 'none';
            }
            
            // 清除统计数据
            function clearStats() {
                document.getElementById('stockCount').textContent = '0';
                document.getElementById('topTenRatio').textContent = '0%';
                document.getElementById('avgRatio').textContent = '0%';
                document.getElementById('totalValue').textContent = '0万';
            }
            
            // 清除图表
            function clearChart() {
                myChart.setOption({
                    series: [{
                        data: []
                    }]
                });
            }
            
            // 显示加载状态
            function showLoading() {
                document.getElementById('positionTableBody').innerHTML = '<tr><td colspan="6" class="loading">加载中...</td></tr>';
            }
            
            // 隐藏加载状态
            function hideLoading() {
                // 加载状态在数据显示时会被替换
            }
            
            // 显示错误信息
            function showError(message) {
                const errorElement = document.getElementById('errorMsg');
                errorElement.textContent = message;
                errorElement.style.display = 'block';
            }
            
            // 隐藏错误信息
            function hideError() {
                document.getElementById('errorMsg').style.display = 'none';
            }
            
            // 窗口大小改变时重新调整图表大小
            window.addEventListener('resize', function() {
                myChart.resize();
            });
            
            // 初始加载示例数据
            // queryPositionData();
        });
    </script>
</body>
</html>